<template>
  <div>举报</div>

  <!-- 数据表格 -->
  <div>
    {{ list }}
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <div>
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination>
    </NFlex>
  </div>

  <div>
    <NModal title="查看举报信息" preset="dialog" v-model:show="rvisible">
      <div class="p-4">
        <NDataTable :loading="rloading" :data="rlist" :columns="rcolumns"></NDataTable>
      </div>
    </NModal>
  </div>

  <div>
    <NModal preset="dialog" v-model:show="visibl">
      <NInput v-model:value="infe" placeholder="请输入删除理由"></NInput>
      <div class="p-4">
        <NButton  type="error" @click="visibl = false">关闭</NButton>
        <NButton type="primary" @click="deleteMessage">确认删除</NButton>
      </div>
    </NModal>
  </div>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import { onMounted, ref } from 'vue'
import {
  useMessage,
  NDataTable,
  type DataTableColumn,
  NSelect,
  NInput,
  NSpace,
  NButton,
  NFlex,
  NPagination,
  NModal,
} from 'naive-ui'
import { Tools } from '@/types/Tools'
import type { TbMessage, TbMessageReport } from '@/types/message'
import { h } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const message = useMessage()

//#region 帖子信息
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as Array<TbMessage>)
const loading = ref(false)

const query = () => {
  loading.value = true
  Api.get(
    `/admin/message/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  query()
})

const columns = [
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '删除理由',
    key: 'reason',
  },
  {
    title: '发布时间',
    key: 'lastupdate',
    render(row) {
      return Tools.formatDate(row.lastupdate)
    },
  },
  {
    title: '状态',
    key: 'deleted',
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            onclick: () => {
              // router.push(`/news/reply/${row.mid}`)
              window.open(router.resolve(`/news/${row.mid}`).href)
              // 新窗口打开
            },
          },
          '查看帖子',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onclick: () => {
              rshowinfo(row)
            },
          },
          '查看举报原因',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onclick: () => {
              showAbb(row.mid)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as Array<DataTableColumn<TbMessage>>

//#endregion

//#region 举报信息
const rpage = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const mid = ref(-1)
const rlist = ref([] as Array<TbMessageReport>)
const rloading = ref(false)
const rvisible = ref(false)

const rshowinfo = (row: TbMessage) => {
  mid.value = row.mid
  rvisible.value = true
  rgetlist()
}

const rgetlist = () => {
  rloading.value = true
  Api.get(
    `/admin/message/${mid.value}/${rpage.value.pageSize}/${rpage.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReport>>) => {
      rloading.value = false
      if (data.success) {
        rlist.value = data.data.list
        rpage.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const rcolumns = [
  {
    title: '举报原因',
    key: 'info',
  },
  {
    title: '举报时间',
    key: 'created ',
    render(row) {
      return Tools.formatDate(row.created)
    },
  },
] as Array<DataTableColumn<TbMessageReport>>

//#endregion

// #region 删除帖子
const visibl = ref(false)
const infe = ref('')
const r1 = ref(0)

const showAbb = (mid: number) => {
  visibl.value = true
  r1.value = mid
}

const deleteMessage = () => {
  Api.delete('/admin/message', { mid: r1.value, reason: infe.value }, (data: BaseResult) => {
    if (data.success) {
      message.success('删除成功')
      visibl.value = false
      query()
      return
    }
    message.error(data.message)
  })
}

//#endregion
</script>

<style scoped lang="scss"></style>
